<template>
	<view>
		<view class="search-box">
			<!--uni-search-bar uni-ui当中封装好的组件  -->
			<uni-search-bar @input="input" @clear="clear" :bgColor="bgColor" :radius="80" cancelButton="none"></uni-search-bar>
		</view>
		<!-- 搜索的历史记录 -->
		<view class="history-box" v-if="searchList.length == 0">
			<!-- 标题 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="30" @click="clearHistory"></uni-icons>
			</view>
			<!-- 历史记录的列表 -->
			<view class="history-list">
				<uni-tag class="uni-tag" type="error" inverted="true" :text="item" v-for="(item,index) in historyCom" :key="index" @click="goGoodsList(item)"></uni-tag>
			</view>
		</view>
		<!-- 搜索的列表 -->
		<view class="search-list" v-else>
			<view class="search-item" v-for="(item,index) in searchList" :key="index" @click="goGoodsDetail(item.goods_id)">
				<view class="goods-name">{{item.goods_name}}</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {searchResult} from '@/api/search.js';
	export default {
		data() {
			return {
				bgColor:'#c00000',
				timer:null,
				keyword:'',
				searchList:[],
				historyList:[]
			};
		},
		onLoad() {
			this.historyList = JSON.parse(uni.getStorageSync('keyword') || '[]');
		},
		computed:{
			historyCom(){
				return [...this.historyList].reverse();
			}
		},
		methods:{
			input(e){
				// console.log(e);
				// e指的就是uni search bar中的值
				// console.log(e);
				// 指频繁触发的情况下，只有足够的空闲时间，才执行代码一次(比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车)；
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					console.log(e);
					this.keyword = e;
					// 根据关键字查询搜索的数据
					this.getSearchList();
					// 保存关键字
					this.saveHistoryList();
				},500)
			},
			async getSearchList(){
				// 发送get请求
				// 必须是keyword有值才发送请求
				if(this.keyword === ''){
					this.searchList = [];
					return
				}
				// 有值发送请求
				const {data:res} = await searchResult(this.keyword);
				console.log(res);
				if(res.meta.status !== 200) return uni.$showMsg();
				this.searchList = res.message;
			},
			goGoodsDetail(goods_id){
				uni.navigateTo({
					url:"/subpkg/goods_detail/goods_detail?goods_id=" + goods_id
				})
			},
			clear(){
				console.log('是否触发清空');
				this.searchList = []
			},
			// 保存搜索的关键字
			saveHistoryList(){
				// this.historyList.push(this.keyword);
				// 去重  set如何使用  [a,aa,aaa,a]
				const set = new Set(this.historyList);//a aa aaa
				// 在添加之前需要做个判读 是否存在this.keyword
				set.delete(this.keyword);
				// 是否可以直接添加
				set.add(this.keyword);
				// set容器转变为数组
				this.historyList = Array.from(set);
				
				// 持久化存储 key 字符串 value也是字符串  JSON 
				// JSOn.stringify  将普通转换为Json   JSON.parse 将json转换为普通
				uni.setStorageSync('keyword',JSON.stringify(this.historyList));
				
			},
			clearHistory(){
				// console.log('xxx');
				// 清空历史记录
				this.historyList = [];
				// 将本存储中的历史记录清空
				uni.setStorageSync('keyword','[]');
			},
			goGoodsList(keyword){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?query=' + keyword
				})
			}
		}
	}
	/* 
	 1.默认 uni-search-bar就是点击过的   自动获取焦点 
	 当使用的现成的组件 实现某个功能 没有现成的api  改动它对应的源码
	 2. 获取搜索框内部的值  函数防抖
	 发送get  搜索框的值作为 query参数
	 3.获取搜素的数据 渲染页面
	 4.渲染完数据之后 点击商品 跳转到商品详情
	 
	 5.搜索历史的排版
	 初始值 
	 6.搜索列表和渲染的数据 只能有一个
	 if
	 searchList 到底有值还是没有值  
	 searchlist.length  == 0 展示历史记录
	 searchlist.length  ！== 0 不展示历史记录  展示渲染的数据
	 
	 渲染列表 --》 searchlist ---》   get请求返回的数据 ---》搜索的关键字
	 
	 发清空操作  this.searchlist = []
	 
	 7.历史记录  historyList:['a','aa','aaa']
	 搜索一个关键字往 historyList当中加入
	 this.historyList.push()
	 ① 重复  数组去重 new  Set
	 ②关键字 先搜索在后 后搜索的在前 reverse
	 ③  没有持久化存放  
	 
	历史记录首次渲染 希望使用Storage
	 
	 
	 8. 点击历史记录当中的每一项都能跳转到商品列表
	 goods_list
	 路径 + 参数keyword
	 
	 点击 a  跳转到 商品列表     渲染与a相关的一系列产品
	 
	 
	 逻辑  代码  用到的旧的知识点  涉及到文档的哪些地方  
	 indexOf
	 
	 */
</script>

<style lang="scss">
.search-box{
	height: 120rpx;
	background-color: green;
}
.search-list{
	padding: 0 10px;
	.search-item{
		padding: 10px 0;
		border-bottom:1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		.goods-name{
			// 单行文本
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			
		}
	}
}
.history-box{
	padding: 0 10px;
	.history-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #ccc;
	}
	.history-list{
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		.uni-tag{
			margin-right: 10px;
			font-size: 30px;
		}
		
	}
}
</style>
